import React from 'react';
import { Modal, View, ActivityIndicator, StyleSheet } from 'react-native';

const Loading = ({ visible = false }) => (
    <Modal
        transparent
        animationType="fade"
        visible={visible}
    >
        <View style={styles.container}>
            <View style={styles.loaderBox}>
                <ActivityIndicator size="large" color="#fff" />
            </View>
        </View>
    </Modal>
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.3)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    loaderBox: {
        backgroundColor: '#222',
        padding: 24,
        borderRadius: 12,
        alignItems: 'center',
    },
});

export default Loading